<template>
  <div class="scroll-card" :class="[isScroll ? 'is-scroll' : 'is-hidden']">
    <img
      src="@/assets/image/scroll.png"
      class="scroll-img"
      @click="emit('go-top')"
    />
  </div>
</template>

<script lang="ts" setup>
import { withDefaults, computed } from "vue";
const props = withDefaults(
  defineProps<{
    scroll: boolean;
  }>(),
  {
    scroll: false,
  }
);
const emit = defineEmits<{
  (e: "update:scroll", scroll: boolean): boolean;
  (e: "go-top"): void;
}>();
const isScroll = computed<boolean>({
  get() {
    return props.scroll;
  },
  set(val: boolean) {
    emit("update:scroll", val);
  },
});
</script>

<style lang="scss" scoped>
.scroll-card {
  position: fixed;
  right: 50px;
  top: 60px;
  z-index: 1000;

  &.is-scroll {
    height: calc(100vh - 80px);
    transition: height 0.5s 0.3s ease-in-out;
  }
  &.is-hidden {
    height: 0;
    transition: height 0.5s 0.3s ease-out;
  }
  .scroll-img {
    height: 100%;
  }
}
</style>
